<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>3D文字</title>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		html {
		    overflow: hidden;
		}
		html,body{width: 100%; height: 100%;}
		#box{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="box"></div>

<script src='three.min.js'></script>
<script src='tween.min.js'></script>
<script src='OrbitControls.js'></script>


<script>
var colors = [
    0xFF62B0,
    0x9A03FE,
    0x62D0FF,
    0x48FB0D,
    0xDFA800,
    0xC27E3A,
    0x990099,
    0x9669FE,
    0x23819C,
    0x01F33E,
    0xB6BA18,
    0xFF800D,
    0xB96F6F,
    0x4A9586
];

var my_font_obj = [];  //我的字体对象
var canva1 = {
	scene: null,  //场景
	camera: null,  //相机
    renderer: null,  //渲染器
	controls: null,  //控制器
	tween: null,  //补间动画
	init: function(){  //初始化
		//主场景
		this.scene = new THREE.Scene();
		this.scene.background = new THREE.Color(0xefefef);
		this.scene.fog = new THREE.Fog(0x000000, 250, 1400);

		//屏幕宽高
		var SCREEN_WIDTH = window.innerWidth,
            SCREEN_HEIGHT = window.innerHeight;
		//相机
		this.camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 1000);
		this.camera.position.set(0, 0, 100);
		this.camera.up.x = 0;  //快门上方向旋转的角度
		this.camera.up.y = 1;
		this.camera.up.z = 0;
        this.camera.lookAt(new THREE.Vector3(0,0,0));

		//补间动画
		this.tween = new TWEEN.Tween(this.camera.position)
		.to(random_position(), 2000)
		.easing(TWEEN.Easing.Linear.None).delay(2000).start();

		// 准备渲染
        this.renderer = new THREE.WebGLRenderer({alpha: false});
        this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        this.renderer.setClearColor(0xffffff);
		document.getElementById('box').appendChild(this.renderer.domElement);

		// 准备控制器
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls.target = new THREE.Vector3(0, 0, 0);
		this.controls.enableDamping = true; 
		//是否可以缩放 
		this.controls.enableZoom = true; 
		//是否自动旋转 
		//this.controls.autoRotate = true; 
		//是否开启右键拖拽 
		this.controls.enablePan = true;
		

		//灯光
		// 添加定向光线，添加基本的阴影
        var dLight = new THREE.DirectionalLight(0xffffff);
        dLight.position.set(0, 100, 100);
        dLight.castShadow = true;
        var helper = new THREE.CameraHelper( dLight.shadow.camera );
        //dLight.shadowDarkness = 0.2;
        dLight.shadow.mapSize.width = dLight.shadow.mapSize.height = 1000;
        this.scene.add(dLight);
        this.scene.add(helper);

		// 添加粒子光线
        /* particleLight = new THREE.Mesh( new THREE.SphereGeometry(10, 10, 10), new THREE.MeshBasicMaterial({ color: 0x44ff44 }));
        particleLight.position = dLight.position;
        this.scene.add(particleLight); */

		// 添加简单的场地
        /* var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
        ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({
            color: this.getRandColor()
        }));
        ground.position.y = 0;
        ground.rotation.x = - Math.PI / 6;
        ground.receiveShadow = true;
        this.scene.add(ground); */
	},
	getRandColor: function() {  //随机返回一个预定义的颜色
        return colors[Math.floor(Math.random() * colors.length)];
    }
}

function animation(){
	//renderer.clear(); //清除屏幕，刷成设置的颜色
	
	canva1.controls.update();

	canva1.tween.onUpdate(function(e){
		//testPositionChange();  //改变文字位置
		//e表示运动完成度
		if(e == 1){  //完成更新
			canva1.tween.to(random_position(), 2000)
			.easing(TWEEN.Easing.Linear.None).delay(0).start();
		}
	})
	TWEEN.update();
	
	canva1.renderer.render(canva1.scene, canva1.camera);
	requestAnimationFrame(animation);
}

function threeStart(){
	canva1.init();
	textShow();  //文字
	animation();
}

threeStart();

//返回随机位置
function random_position(){
	return {
		x: parseInt(-Math.random() *400 + 200),
		y: parseInt(-Math.random() *400 + 200),
		z: parseInt(-Math.random() *400 + 200)
	}
}
//文字
function textShow(){
	var loader = new THREE.FontLoader();
	loader.load('./my_font.json', function (font) {
		var myFonts = [];
		var myText= ['张','兢','我','爱','你'];
		for(var i=0; i<5; i++){
			var geometry = new THREE.TextBufferGeometry(myText[i], {
				font: font,  //字体
				size: 16,   //字号大小
				height: 12,  //文字的厚度
				weight: 'normal', //值为'normal'或'bold'，表示是否加粗
				style: 'normal', //值为'normal'或'italics'，表示是否斜体
				//bevelThickness: 1, //倒角厚度
				//bevelSize: 1, //倒角宽度
				//curveSegments: 30,//弧线分段数，使得文字的曲线更加光滑
				//bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
			});
			var material = new THREE.MeshPhongMaterial({ color: canva1.getRandColor() });
			var mesh = new THREE.Mesh(geometry, material);
			mesh.position.x = 30 * (i-2.5);
			my_font_obj.push(mesh);
			canva1.scene.add(mesh);
		}
	});
}

//文字位置随机改变
function testPositionChange(){
	for(var i=0; i<my_font_obj.length; i++){
		my_font_obj[i].position.x += -Math.random()*2 +1;
		my_font_obj[i].position.y += -Math.random()*2 +1;
		my_font_obj[i].position.z += -Math.random()*2 +1;
	}
}
</script>
</body>
</html>